<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('部门树选择')"/>
  <th:block th:include="include :: ztree-css"/>
</head>
<style>
  body {
    height: auto;
    font-family: "Microsoft YaHei";
  }

  button {
    font-family: "SimSun", "Helvetica Neue", Helvetica, Arial;
  }
</style>
<body class="hold-transition box box-main">
<input id="wfId" name="wfId" type="hidden" th:value="${wfId}"/>
<input id="deptNos" type="hidden" th:value="${deptNos}"/>
<input id="deptNames" type="hidden" th:value="${deptNames}"/>
<div class="wrapper">
  <div class="treeShowHideButton" onclick="$.tree.toggleSearch();">
    <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
    <label id="btnHide" title="隐藏搜索">︽</label>
  </div>
  <div class="treeSearchInput" id="search">
    <label for="keyword">部门名称：</label><input type="text" class="empty" id="keyword" maxlength="50">
    <button class="btn" id="btn" onclick="$.tree.searchNode()"> 搜索</button>
  </div>
  <div class="treeExpandCollapse">
    <a href="#" onclick="$.tree.expand()">展开</a> /
    <a href="#" onclick="$.tree.collapse()">折叠</a>
  </div>
  <div id="tree" class="ztree treeselect"></div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
  var prefix = ctx + "system/dept"
  $(function () {
    var url = prefix + "/copyDeptTreeData/"+$('#wfId').val();
    var options = {
      check:{
        enable:true
      },
      url: url,
      expandLevel: 0,//展开层级
      onCheck: zOnCheck
    };
    $.tree.init(options);
  });

  //zTree复选框选中回调函数
  function zOnCheck(event, treeId, treeNode) {
    var treeObj= $.fn.zTree.getZTreeObj("tree");
    var nodes= treeObj.transformToArray(treeObj.getNodes());
    var arr=[];
    for(const key in nodes) {
      arr.push(nodes[key]);
    }
    let deptNames = "";
    let deptNos = "";
    for(var i=0;i<arr.length;i++){
      if(arr[i].pId && arr[i].checked){
          deptNames += "," + arr[i].name;
          deptNos += "," + arr[i].id;
      }
    }
    $('#deptNames').val(deptNames.substring(1, deptNames.length)); //获取选中节点的名称
    $('#deptNos').val(deptNos.substring(1, deptNos.length)); //获取选中节点的值
  }

  function getDeptNos(){
    return $('#deptNos').val();
  }

  function getDeptNames(){
    return $('#deptNames').val();
  }
</script>
</body>
</html>
